<template>
    <u-popup :show="isPopup" :round="15" mode="bottom" @close="onClose" :closeable="false">
        <view class="botMenuWrap">
            <view class="flex center" style="padding: 40rpx; border-bottom: 1px solid #F5F5F5;">
                <view></view>
                <view class="popTitle">{{ title }}</view>
                <!-- <view style="padding: 10rpx">
                  <u-icon name="close" :bold="true" @click="onClose"/>
              </view> -->
            </view>
            <view class="flex flex-column center" :closeOnClickOverlay="true"
                overlayStyle="{background: 'rgba(3, 100, 219, 0)'}">
                <scroll-view :scroll-y="true" style="width: 100%;height: 60vh;">
                    <view v-if="knowledgeList.length">
                        <view v-for="item in knowledgeList" :key="item.id">
                            <view :class="{'itemStyle': true, 'disabled': item.canAddChild}" 
                                 style="padding-left: 60rpx;" @click="onSelect(item)">{{ item.name }}</view>
                            <view v-for="ite in item.children" :key="ite.id">
                                <view :class="{'itemStyle': true, 'disabled': ite.canAddChild}" 
                                    style="padding-left: 80rpx;" @click="onSelect(ite)">{{ ite.name }}</view>
                                <view v-for="it in ite.children" :key="it.id">
                                    <view :class="{'itemStyle': true, 'disabled': it.canAddChild}" 
                                        style="padding-left: 100rpx;" @click="onSelect(it)">{{ it.name }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view v-else style="margin: 20%">
                        <u-empty text="暂无数据" mode="list"></u-empty>
                    </view>
                </scroll-view>
                <view class="botBtn center" v-if="showCancel" @click="onClose">
                    取消
                </view>
            </view>
        </view>
    </u-popup>
</template>
<script>
import { listStruct } from "../../myQuestionBank/services/myQuestionBankService"
export default {
    name: "SelectknowledgePopup",
    data() {
        return {
            knowledgeList: [],
        }
    },
    watch: {
        subjectUuid: {
            handler: function (val, oldVal) {
                if (val) {
                    this.getKnowledgeList()
                }
            },
            deep: true
        },
        isPopup: {
            handler(val, oldVal) {
                if (this.subjectUuid&&val) {
                    this.getKnowledgeList();
                }
            },
            deep: true
        }
    },
    created() {
        console.log(this.subjectUuid, "--58")
    },
    props: {
        isPopup: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: "",
        },
        showCancel: {
            type: Boolean,
            default: true
        },
        subjectUuid: {
            type: String,
            default: ""
        }
    },

    methods: {
        // 查询知识结构
        getKnowledgeList() {
            listStruct({ subjectUuid: this.subjectUuid }).then(res => {
                this.knowledgeList = res || []
            })
        },
        onClose() {
            this.$emit("close")
        },
        onSelect(item) {
            if(!item.canAddChild){
                this.$emit("onSelect",item)
            }
        }
    }
}

</script>

<style scoped lang="scss">
.botMenuWrap {
    .popTitle {
        color: #333;
        font-size: 32rpx;
        font-weight: bold;
    }

    .shadowWrap {
        box-shadow: 0px 4px 12px 0px #00000014;
        border-radius: 24rpx;
    }
    .itemStyle{
        padding: 32rpx 0;
        display: flex;
        flex-direction: row;
        /* justify-content: center; */
        border: 1px solid #F5F5F5;
    }
    .disabled{
        color: #999;
    }
    .botBtn {
        width: 100%;
        padding: 28rpx;
        border-top: 6rpx solid #F2F2F2;
    }
}
</style>
